<template>
	<!-- 催收列表 -->
	<div class="collectlist" v-loading="loading">
		<h3>催收列表</h3>
		<AreaWarp :padding="true">
	        <SearchWarp :label="'姓名'">
	        	<el-input v-model.trim="searchInfo.realName"    placeholder="请输入用户姓名"></el-input>
	        </SearchWarp>
	        <SearchWarp :label="'手机号'">
	          <el-input v-model.trim="searchInfo.mobile" maxlength="11" placeholder="请输入手机号码"></el-input>
	        </SearchWarp>
	        <SearchWarp :label="'逾期天数'">
	          <el-input class="inputWidth" v-model.trim="searchInfo.overDaysStart"  placeholder="开始天数"></el-input>
	          -
	          <el-input class="inputWidth" v-model.trim="searchInfo.overDaysEnd"  placeholder="结束天数"></el-input>
	        </SearchWarp>
	        <SearchWarp :label="'入催时间'">
	          	<el-date-picker v-model="searchInfo.entryTime" type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期"
	                          end-placeholder="结束日期" :editable="false"></el-date-picker>
	        </SearchWarp>
	        <SearchWarp :label="'分配时间'" >
	          	<el-date-picker disabled  type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期"
	                          end-placeholder="结束日期" :editable="true"></el-date-picker>
	        </SearchWarp>
	        <SearchWarp :label="'上次催收时间'">
	          	<el-date-picker v-model="searchInfo.lastEntryTime" type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期"
	                          end-placeholder="结束日期" :editable="false"></el-date-picker>
	        </SearchWarp>
	        <SearchWarp :label="'上次催收状态'">
		        <el-select v-model="searchInfo.status"  placeholder="请选择">
		          <el-option v-for="item in statusOptions"
		                     :key="item.value"
		                     :label="item.label"
		                     :value="item.value">
		          </el-option>
		        </el-select>
		    </SearchWarp>
	        <BtnWarp>
	          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
	          <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
	        </BtnWarp>
	     </AreaWarp>

	   	<AreaTitleWarp :title="'订单列表'">
          	
      	</AreaTitleWarp>

      <!--搜索结果区域-->
      <AreaWarp :padding="false">
        <el-table :data="tableInfo.collectionList" style="width: 100%" class="pub-table" header-row-class-name="pub-table-header-row" header-cell-class-name="pub-table-header-cell"
          tooltip-effect="dark"   
        >

          <el-table-column prop="borrowId" label="案件详情" min-width="120">
          	<template slot-scope="scope">
          		<el-button type="text" size="small" @click="dblclick(scope.row)">查看</el-button>
          	</template>
          </el-table-column>
          <el-table-column prop="appId" label="产品" min-width="120" :formatter="formatter_product"></el-table-column>
          <el-table-column prop="realName" label="姓名" min-width="120"></el-table-column>
          <el-table-column prop="mobile" label="手机号" min-width="120"></el-table-column>
          <el-table-column prop="overdays" label="逾期天数" min-width="120"></el-table-column>
          <el-table-column prop="overMoney" label="逾期金额" min-width="120"></el-table-column>
          <el-table-column prop="repayMoney" label="已还金额" min-width="180"></el-table-column>
          <el-table-column prop="leftMoney" label="剩余应还" min-width="180"></el-table-column>
          <el-table-column prop="entryTime" label="入催时间" min-width="180" :formatter="formatter_time"></el-table-column>
           <el-table-column prop="lastEntryTime" label="上次催收时间" min-width="180" :formatter="formatter_time"></el-table-column>
           <el-table-column prop="status" label="上次催收状态" min-width="180" :formatter="filter_status"></el-table-column>
        </el-table>
        <el-pagination
          layout="total,sizes,prev, pager, next, jumper" class="pub-page"
          :current-page="searchInfo.page"
          :page-sizes="[20,50,100]"
          :page-size="searchInfo.size"
          :total="tableInfo.total"
          @current-change="search"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </AreaWarp>
	</div>
</template>
<script>
	import Collection  from '../../../assets/js/collection.js'
	import {collectionStatus} from '../../../assets/js/collectionStatus';
	export default({
		data(){
			return{
				searchInfo:{
					realName: '',
					mobile: '',
					overDaysStart: '',
					overDaysEnd: '',
					entryTime:'',
					lastEntryTime:'',
					status:'',
					size:50,
					page:1,
				},
				loading: false,
				statusOptions:[{
					value:'',
	          		label: '全部'
				}],
				tableInfo:{
					collectionList:[],
					total: 0
				}
			}
		},
		methods:{
			status(){
				let that = this;
				return new Promise(function(resolve,reject){
					that.ajaxJson({
			            url: '/finance/resourcelist',
			            success: function (res) {
				            if (res.code == '0') {			            	
				            	let data = res.data;
				            	data.forEach(function(item){
				            		that.statusOptions.push({
				            			value: item.id,
	          							label: item.resource
				            		})

				            	})
				            	resolve()
				            }
				         }
			        })	
				})
			},
			handleSizeChange(val){
				let that = this;
				that.searchInfo.size = val;
            	that.searchInfo.page = 1;
            	that.search()
			},
			search(currentPage){
				let that = this;
				that.searchInfo.page = typeof currentPage == 'number' ? currentPage : 1;
				let x = {
					that: that,
					realName: that.searchInfo.realName,
					mobile: that.searchInfo.mobile,
					entryTime: that.searchInfo.entryTime,
					lastEntryTime: that.searchInfo.lastEntryTime,
					status: that.searchInfo.status,
					overDaysStart: that.searchInfo.overDaysStart,
					overDaysEnd: that.searchInfo.overDaysEnd,
					size: that.searchInfo.size,
					page: that.searchInfo.page,
				}

				let collection = new Collection(x)

				let reqData = collection.getState()
				if(reqData.code){
					that.showMsg(reqData.message,'error')
					return 
				}
				that.loading = true;
				that.ajaxJson({
		          url: '/collection/list',
		          data: reqData,
		          success: function (res) {
		            if (res.code == '0') {
		            	that.tableInfo = res.data;
		            }
		            that.loading = false;
		          }
		        })	
			},
			reset(){
				let that = this;
				that.searchInfo = {
					realname: '',
					mobile: '',
					overDaysStart: '',
					overDaysEnd: '',
					entryTime:'',
					lastEntryTime:'',
					status:'',
					size:50,
					page:1,
					data: ''
				}
				that.search();
			},
			//查看
			dblclick(row){
                let that = this;
                that.$emit('addTab', {
                  tabOptions: 'collectionMessage_'+ row.realName+'-'+row.borrowId+'-案件详情',
                  queryMsg: { method: 'add',borrowId:row.borrowId,userId:row.userId }
                })
            },
            filter_status: collectionStatus

		},
		created(){
			let that = this;
			Promise.all([
				that.status()
			]).then(arr=>{
				that.search();
			})
		},
		beforeCreate(){
			let that = this;

		}
	})
</script>
<style lang="less">
	.collectlist{
		.inputWidth{
			width:120px;
		}
	}
</style>